﻿
@{
    ViewBag.Title = "BuyOrderHtml";
}
<link href="~/HelpContent/Css/BuyOrderHtml.css" rel="stylesheet" />
<script src="~/HelpContent/vue/vue.js"></script>
<link href="~/HelpContent/FormKuang/text.css" rel="stylesheet" />


<div id="app" class="Body">
    {{onload}}
    {{onScroll()}}
    <div class="Content">
        <div class="GoodInfo">
            <div class="GoodType">
                <div class="Title">餐品类型</div>
                <div class="content">
                    <div class="Select" :style="transForm"></div>

                    <div v-on:click="SelectGoodType(item,index)" v-for="(item,index) in GoodsType" :class="ClassList[index]">
                        <div class="img">
                            <img :src="item.img">
                        </div>
                        <div class="Name">{{item.name}}</div>
                    </div>


                </div>
            </div>
            <div class="Goods">
                <div class="Title"> 餐桌号 <span style="color:var(--ZhuTiSe)">{{Tab.name}}</span></div>
                <div class="content">

                    <div v-for="(item,index) in GoodsType" class="GoodsView">
                        <div v-for="label in item.GoodsLabel" class="GoodsLabel">
                            <div v-if="label.Goods.length>0" class="LabelName">
                                <div><i class="fas fa-fire-alt"></i>{{label.name}}</div>
                            </div>

                            <div v-for="(good) in label.Goods" class="GoodsList">

                                <div class="Good">
                                    <div class="img">
                                        <img :src="good.img" />
                                    </div>
                                    <div class="info">
                                        <div class="name">{{good.name}}</div>
                                        <div class="details">{{good.detail}}</div>
                                        <div class="price">￥{{good.price}}.00元</div>
                                    </div>
                                    <div class="AddDel">
                                        <div v-if="!good.isFlovar" class="AddBox">

                                            <div @@click="delGoods(good)" class="Del button">减</div>

                                            <div class="num">{{getGoodsCount(good)}}</div>
                                            <div @@click="addGoods(good)" class="Add button">加</div>

                                        </div>
                                        <div @@click="ShowSelectScale(good)" v-if="good.isFlovar" class="GuiGeAdd">
                                            <div class="num">{{getGoodsCount(good)}}</div>
                                            选规格
                                        </div>

                                    </div>
                                </div>





                            </div>


                        </div>





                    </div>
                    <div style="height:80px;"></div>

                </div>
                <div class="PayOrder">
                    <div @@click="ShowShopCar()" class="left">
                        <div class="Car">
                            <i class="fab fa-shopify"></i>
                            <div class="num">{{getAllGoodsCount}}</div>
                        </div>
                        <div class="price">￥{{getAllGoodsPrice}}</div>
                    </div>
                    <div @@click="CommitOrder()" class="right">提交订单</div>
                </div>
            </div>
        </div>
    </div>

    <div :style="ShowGuiGe" class="GuiGeXanZe">

        <div class="GoodsBox">
            <div class="Img">
                <img :src="thisGood.img" />
            </div>
            <div class="Name">
                {{thisGood.name}}
            </div>
            <div class="Price">
                ￥ {{thisGood.price}} 元
            </div>

            <div class="GuiGe">请选择规格</div>
            <div class="flavors">
                <div @@click="SelectFlavor(item,index)" v-for="(item,index) in thisGood.Flavors" :class="FlavorsClass[index]"> <i class="fas fa-fire-alt"></i> {{item.name}}</div>

            </div>
            <div @@click="addGoods(thisGood,flavor)" class="addGood">
                加入购物车
            </div>

            <div @@click="HiddenGuiGe()" class="Close">✖</div>
        </div>

    </div>
    <div :style="right" class="ShopCart">
        <div class="Flter"></div>
        <div @@click="ShowShopCar()" class="OnLeft">
            <i class="fab fa-shopify"></i>
            <div class="num">{{getAllGoodsCount}}</div>
        </div>


        <div class="ShopCartContent">

            <div class="TitleName">
                购物车一共 <span>({{getAllGoodsCount}})</span>件商品
            </div>
            <div class="ShopCar">

                <div v-for="(item,index) in ShopCart" class="car">
                    <div class="img">
                        <img :src="item.good.img" />
                    </div>
                    <div class="info">
                        <div class="Name">{{getgoodsName(item)}}</div>
                        <div class="Price">￥{{item.good.price*item.num}}元</div>
                        <div class="AddBox">
                            <div @@click="delGoods(item.good,item.flavor)" class="Del">－</div>
                            <div class="Num">{{item.num}}</div>
                            <div @@click="addGoods(item.good,item.flavor)" class="Add">＋</div>

                        </div>
                    </div>
                </div>


            </div>
            <div class="ShopCarClear">

                清空购物车 <div @@click="clearShopCart()" class="Clear">
                    <i class="fas fa-trash-alt"></i>
                </div>

            </div>



        </div>


    </div>


    <div :class="UserInfo">
        <div class="UserBox">
            <div style="margin-top:0px;" class="Input-Control">
                <div class="input-text"><p>联系电话</p></div>
                <input type="text" v-model="inputs[0]" required autocomplete="off" value="" />
            </div>
            <div class="Input-Control">
                <div class="input-text"><p>用餐人数</p></div>
                <input type="number" v-model="inputs[1]" required autocomplete="off" value="" />
            </div>
            <div class="textarea-Control">
                <div class="textarea-text"><p>备注</p></div>
                <textarea v-model="inputs[2]" required></textarea>
            </div>
            <div class="Input-Control">
                <button @@click="AddOrder()">确定信息</button>
            </div>
            <div @@click="CloseUserInfo()" class="Close">
                ✖
            </div>
        </div>
    </div>

</div>

<script>


    const app = new Vue({
        el: '#app',


        data: {
            UserInfo: " UserInfo",
            inputs: ['', 0, ''],
            ok: 'af',
            GoodsType: [],
            ClassList: [],
            transForm: 'transform: translateY(0px)',
            ShopCart: [],
            hasGood: false,
            right: "right:-400px",
            thisGood: {
                id: '',
                name: '',
                price: 0,
                Flavors: [],

            },
            ShowGuiGe: "top: -200%;",
            FlavorsClass: [],
            flavor: {},
            GoodsViews: [],
            Content: null,
            index: 0,
            Tab: {}
        },
        methods: {
            AddOrder() {
                let oid = sessionStorage.getItem('Oid');

                if (this.inputs[1] < 1 && oid == undefined) {
                    Peng.Show("就餐人数不能小于一位", { type: "Danger" });
                } else {
                    let Order = {
                        Tid: this.Tab.id,
                        details: this.ShopCart,
                        phone: this.inputs[0],
                        occupy: this.inputs[1],
                        isVip: 0,
                        Type: 1,
                        WxUid: null,
                        remark: this.inputs[2],
                        PayType: 2
                    };

                    Order.id = oid;
                    var CommitOrder = Peng.load({ box: 'Cols', style: 'circle', color: 'ZhutiSe', content: '正在提交订单中.....' });

                    $.post("/Order/CreateOrder", Order).then((res) => {

                        if (res.code == 0) {
                            Peng.closeload(CommitOrder);
                            this.UserInfo = "UserInfo";

                            sessionStorage.setItem("oid", res.data.oid);



                            location.href = "/Order/OrderPay";

                        }
                    });


                }
            },
            CloseUserInfo() {
                this.UserInfo = "UserInfo";
                this.inputs = ['', 0, ''];
            },
            CommitOrder() {

                if (this.ShopCart.length <= 0) {
                    Peng.Show("你还没有选择任何物品", { type: "Danger" });
                } else {
                    this.UserInfo = "UserInfo active";
                }
            },
            onScroll() {

                this.Content = document.querySelector(".Goods .content");
                this.GoodsViews = document.querySelectorAll(".content .GoodsView");


                this.Content.addEventListener("scroll", () => {



                    for (let i = 0; i < this.GoodsViews.length; i++) {

                        let sumtop = this.GoodsViews[i].getBoundingClientRect().top;
                        if (sumtop - 150 < 0 && sumtop - 150 > -100) {

                            for (let i = 0; i < this.ClassList.length; i++) {
                                this.ClassList[i] = "option";
                            }


                            this.ClassList[i] = `option active`;

                            this.transForm = `transform: translateY(${(i) * 50 + ((i) * 10)}px)`;

                            break;
                        }

                    }








                });
            },
            SelectFlavor(item, index) {
                this.flavor = item;
                let DongTai = []
                for (let i = 0; i < this.FlavorsClass.length; i++) {
                    DongTai.push('option');
                }
                DongTai[index] = 'option active';


                this.FlavorsClass = DongTai;
                console.log(this.FlavorsClass);

            },
            HiddenGuiGe() {
                this.ShowGuiGe = "top:-200%;";

            },
            ShowSelectScale(good) {
                this.ShowGuiGe = "top:0px;";
                this.thisGood = good;
                this.FlavorsClass = [];
                for (let i = 0; i < this.thisGood.Flavors.length; i++) {
                    this.FlavorsClass.push('option');
                }

                this.SelectFlavor(this.thisGood.Flavors[0], 0);


            },
            ShowShopCar() {

                if (this.right == "right:-0px") {
                    this.right = "right:-400px";

                } else {
                    this.right = "right:-0px";
                }

            },


            SelectGoodType(item, index) {
                this.transForm = `transform: translateY(${(index) * 50 + ((index) * 10)}px)`;
                this.index = index;


                for (let i = 0; i < this.ClassList.length; i++) {
                    this.ClassList[i] = 'option';
                }

                this.ClassList[index] = `option active`;




                let sumtop = 0;
                for (let i = 0; i < this.GoodsViews.length; i++) {
                    if (i < index) {
                        sumtop += this.GoodsViews[i].clientHeight + 12;

                    }
                }


                this.Content.scrollTop = sumtop;








            },
            clearShopCart() {
                this.ShopCart = [];
            },
            delGoods(item) {

                for (let i = 0; i < this.ShopCart.length; i++) {
                    if (this.ShopCart[i].good.id == item.id) {
                        if (this.ShopCart[i].num > 1) {
                            this.ShopCart[i].num -= 1;
                        } else {
                            this.ShopCart.splice(i, 1);
                        }
                        break;
                    }
                }






            },
            addGoods(item, flavor) {
                console.log(this.ShopCart);
                this.hasGood = false;
                if (!item.isFlovar) {
                    for (let i = 0; i < this.ShopCart.length; i++) {
                        if (this.ShopCart[i].good.id == item.id) {
                            this.hasGood = true;
                            this.ShopCart[i].num += 1;
                            break;
                        }
                    }

                    if (!this.hasGood) {
                        this.ShopCart.push({
                            good: item,
                            num: 1
                        });

                    }
                } else {
                    for (let i = 0; i < this.ShopCart.length; i++) {
                        if (this.ShopCart[i].good.id == item.id && this.ShopCart[i].flavor.id == flavor.id) {

                            this.hasGood = true;
                            this.ShopCart[i].num += 1;
                            break;
                        }
                    }

                    if (!this.hasGood) {
                        this.ShopCart.push({
                            good: item,
                            num: 1,
                            flavor: flavor
                        });

                    }
                    this.ShowGuiGe = "top:-100%;";
                }
            }

        },
        computed: {
            onload() {

                let Tab = sessionStorage.getItem("Tab");


                Tab = JSON.parse(Tab);

                if (Tab == "" || Tab == undefined) {


                    Peng.Show("你没有选择卓台号", { type: "Danger" });
                    setTimeout(() => {
                        location.href = "/index/index";

                    }, 1000);

                } else {

                    this.Tab = Tab;
                    $.get("/Goods/GetAllGoods").then(res => {
                        this.GoodsType = res.data;
                        for (let i = 0; i < res.data.length; i++) {
                            this.ClassList.push('option');
                        }

                        this.ClassList[0] = "option active";
                    });


                    //let data = JSON.parse(sessionStorage.getItem("ShopCart"));
                    //this.ShopCart = data;




                }






            },
            getgoodsName() {
                return (item) => {
                    if (item.flavor != undefined) {
                        return item.good.name + `(${item.flavor.name})`;
                    } else {
                        return item.good.name;
                    }

                }

            },

            getGoodsCount() {
                return (item) => {
                    let sum = 0;
                    if (item != undefined) {
                        if (!item.isFlovar) {
                            for (let i = 0; i < this.ShopCart.length; i++) {
                                if (this.ShopCart[i].good.id == item.id) {
                                    return this.ShopCart[i].num;
                                    break;
                                }
                            }

                            return 0;
                        } else {
                            for (let i = 0; i < this.ShopCart.length; i++) {
                                if (this.ShopCart[i].good.id == item.id) {
                                    sum += this.ShopCart[i].num;

                                }
                            }
                            return sum;
                        }
                    }
                }
            },
            getAllGoodsCount() {
                let sum = 0;
                for (let i = 0; i < this.ShopCart.length; i++) {

                    sum += this.ShopCart[i].num;

                }
                return sum;
            },
            getAllGoodsPrice() {
                let sumPrice = 0;
                for (let i = 0; i < this.ShopCart.length; i++) {

                    sumPrice += this.ShopCart[i].num * this.ShopCart[i].good.price;

                }
                return sumPrice;
            }
        },
        onReady() {

        }
    });


</script>